<template>
	<view>
		<view class="explain">原手机号</view>
		<input class="password" type="text" placeholder="输入原手机号" v-model="oldPhone" maxlength=15/>
		<view class="explain">新手机号(11位手机号)</view>
		<input class="password" type="text" placeholder="输入新的手机号" v-model="newPhone" maxlength=20/>
		
		<view class="explain">确认手机号</view>
		<input class="password" type="text" placeholder="再次输入手机号" v-model='againPhone' maxlength=20/>
		<text class="password_explain"></text>
		
		<view class="explain">验证码</view>
		<input class="password" type="text" placeholder="输入验证码" v-model='phoneCode' maxlength=20/>
		<text class="password_explain"></text>
		
		<view class="finish">
			<button @click="getPhoneCode" :disabled="flag">{{content}}</button>
		</view>
		
		<view class="finish" @click="updatePhoneWord">修改</view>
		
		<uni-popup ref="popup" type="type" :animation="false" duration="1000" :maskClick="true" >
			<view style="background-color: #fff;padding: 15px;border-radius: 4%;width:150px;height:45px;line-height: 45px;text-align: center;">
				修改密码成功！
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {getCode,updatePhone} from '../../../../api/my/my.js'
	export default {
		data() {
			return {
				content:"发送验证码",
				totalTime: 60 ,
				flag: false,
				newPhone:'',
				oldPhone:'',
				againPhone:'',
				phoneCode:''
			}
		},
		onShow(){
			uni.getUserInfo({
			                    success: (res) => {
			                        this.userInfo = res.userInfo;
			                        console.log(this.userInfo);
			                    },
			                    fail: () => {
			                        console.log("未授权");
			                    }
			                })
		},
		methods: {
			finish(){
				this.$refs.popup.open(); //提示信息
			},
			reSet(){
				this.newPhone ='',
				this.oldPhone = '',
				this.againPhone ='',
				this.phoneCode=''
			},
			getPhoneCode(){
				console.log("调用了验证码");
				if(this.oldPhone==''){
					uni.showToast({
						icon:'none',
						title:'原手机号不能为空',
						mask:true
					});
					this.reSet();
				}else if(this.oldPhone.length!=11){
					uni.showToast({
						icon: "none",
						title: "手机号不符合要求",
						mask: true
					})
				}else {
					var data ={
						oldPhone:this.oldPhone
					}
					console.log(data,'data')
					getCode(data).then(res=>{
						console.log(res,'res.data')
						if(res.phoneCode == 0){
							uni.showToast({
								icon: "none",
								title: "发送",
								mask: true
							})
							this.logout()
						}else {
							this.finish()
							// uni.showToast({
							// 	icon: "none",
							// 	title:res.message,
							// 	mask: true
							// })
						}
					})
					this.flag = true;
					this.content=this.totalTime+"s后重新发送";
					let clock = window.setInterval(()=>{
						this.totalTime--;
						this.content=this.totalTime+"s后重新发送";
						if(this.totalTime===0){
							window.clearInterval(clock);
							this.content="重新发送验证码";
							this.totalTime=60;
							this.flag=false;
						}
					},1000)
				}
			},
			updatePhoneWord(){
				console.log("调用该方法")
				if(this.newPhone==''||this.oldPhone=='' ||this.againPhone =='' || this.phoneCode == ''){
					uni.showToast({
						icon: "none",
						title: "请确认输入",
						mask: true
					});
					this.reSet();
				}else if(this.newPhone.length!=11){
					uni.showToast({
						icon: "none",
						title: "手机号不符合要求",
						mask: true
					})
					this.reSet();
				}else if(this.newPhone != this.againPhone){
					uni.showToast({
						icon: "none",
						title: "两次输入手机号不一致",
						mask: true
					})
					this.reSet();
				}else {
					var data ={
						oldPhone:this.oldPhone,
						newPhone:this.newPhone,
						phoneCode:this.phoneCode
					}
					console.log(data,'data')
					updatePhone(data).then(res=>{
						console.log(res,'res.data')
						if(res.code == 0){
							uni.showToast({
								icon: "none",
								title: "修改成功",
								mask: true
							})
							this.logout()
						}else {
							this.finish()
							// uni.showToast({
							// 	icon: "none",
							// 	title:res.message,
							// 	mask: true
							// })
						}
						this.reSet();
					})
				}					
			}
		},
	}
</script>

<style scoped lang="scss">
	.explain{
		height:44px;
		line-height: 44px;
		margin-left: 10px;
		font-size:15px;
	}
	.password{
		height: 55px;
		line-height: 55px;
		padding-left: 10px;
		background-color: #F8F8F8;
	}
	input{
		border:1px solid #E6E6E6;
	}
	.password_explain{
		padding-left: 10px;
		display:flex;
		margin-top:10px;
		font-size:15px;
		color:grey
	}
	.finish{
		margin:20px auto;
		height: 44px;
		background-color:#F8F8F8 ;
		text-align: center;
		line-height: 44px;
		border-radius: 4%;
	}
</style>
